 <template>
  <div>
    <!-- 报名人员 -->
    <tTable :columns="columns" :data="personList"></tTable>

    <Pagination :total="total" @handleChange="handlePersonChange" />
  </div>
</template>

<script>
import { formatDateTime } from "src/util/time.js";
import { getProductAllVideo } from "api/org_course";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      personList: [],
      total: -1,
      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          attr: { prop: "phone", label: "联系电话" }
        },
        {
          attr: { prop: "buyTime", label: "购买时间" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.currentId = this.$route.params.id;
    this.getData(1);
  },
  methods: {
    getData: function(pageNumber) {
      getProductAllVideo(this.currentId, 1).then(res => {
        this.personList = res.content.map(i => {
          i.buyTime = formatDateTime(i.buyTime);
          return i;
        });
        this.total = res.totalElements;
      });
    },
    handlePersonChange: function(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.detail-container > div {
  margin-top: 10px;
}

.detail-container > div > label {
  color: #999;
}
</style>
